Estoy usando un componente de selección de interfaz de usuario de material, que se llena con datos de una matriz con valores y opciones.
En la matriz también hay un accesorio de objeto anidado llamado "setFilter". setFilter tiene un valor de setState, que luego se usará en handleFlilter.
const [years, setYears] = useState("0"); const [hours, setHours] = useState(""); const inputs = [ { name: "YEARS", propValue: years, setFilter: setYears, placeholder: "Years", selectOptions: optionsYears }, { name: "AVAILABILITY", propValue: hours, setFilter: setHours, placeholder: "Availability", selectOptions: optionsHours } ]; const handleFilter = (e, setFilter) => { setFilter(e.target.value); }; <div> {inputs.map( ({ name, propValue, placeholder, selectOptions, setFilter }) => { return ( <div> <CustomSelect value={propValue} onChange={handleFilter(setFilter)} > {selectOptions.map((item) => ( <StyledOption key={item.option} value={item.value}> {item.option} </StyledOption> ))} </CustomSelect> </div> ); } )}El problema es que recibo un error llamado "No se pueden leer las propiedades de indefinido (leyendo 'valor')" o "e.target no está definido" en el ejemplo de código.
No estoy seguro de dónde está exactamente el problema. ¿No estoy apuntando correctamente al valor o la función no es correcta? No es un elemento html normal como div, sino una selección de material, por lo que debería funcionar con la propiedad de valor seleccionada.
Revisé el valor de prop y las opciones están correctamente visibles en la lista de selección.
Aquí está la muestra de demostración: https://codesandbox.io/s/unstyledselectcontrolled-material-demo-forked-wxqnrs?file=/demo.js:5335-5927
Hay dos problemas:
onChangee (el valor) al controlador handerFilterPor ejemplo:
// Only changes to your code have been shown -- the rest was removed for brevity ... const handleFilter = (e, setFilter) => { // Change: `e` in this case does not appear to be the event, but the value itself setFilter(e); }; ... {/* Change: Wrapped Handler, passes e */} <CustomSelect value={propValue} // Takes `e` and then passes that and setFilter to your handler onChange={(e) => handleFilter(e, setFilter)} > ...Código de trabajo Sandbox: https://codesandbox.io/s/unstyledselectcontrolled-material-demo-forked-e49v8s